<!-- Created by henian.xu on 2021/7/10. -->

<template>
  <div class="shop-item">
    <div class="item">
      <div class="label">门店名称:</div>
      <div class="value">{{ dataset.name }}</div>
    </div>
    <div class="item" @click="onAddress">
      <div class="label">门店地址:</div>
      <div class="value">
        {{ dataset.address }}
      </div>
    </div>
    <div class="item">
      <div class="label">门店电话:</div>
      <a :href="`tel:${dataset.mobile}`" class="value">{{ dataset.mobile }}</a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ShopItem',
  data() {
    return {};
  },
  props: {
    dataset: {
      type: Object,
      default: () => ({}),
    },
  },
  methods: {
    onAddress() {
      this.$wxSDK.openLocation({
        longitude: +this.dataset.lng,
        latitude: +this.dataset.lat,
        name: this.dataset.name,
        address: this.dataset.address,
      });
    },
  },
};
</script>

<style lang="scss">
.shop-item {
  padding: $padding $padding-big;

  > .item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: $padding-small;
    > .label {
      flex: 0 0 auto;
      margin-right: $margin-small;
    }
    > .value {
      flex: 1 1 1%;
      color: $color-main;
    }
  }
  + .shop-item {
    border-top: 1px solid $color-border;
  }
}
</style>
